import { Button, Box, useColorMode, Text, useColorModeValue, LightMode, useStyleConfig } from '@chakra-ui/react';

// const LaGouButton = chakra('button', {
//   baseStyle: {
//     borderRadius: 'lg',
//   },
//   sizes: {
//     sm: {
//       px: '3',
//       py: '1',
//       fontSize: '12px'
//     },
//     md: {
//       px: '4',
//       py: '2',
//       fontSize: '14px'
//     }
//   },
//   variants: {
//     primary: {
//       bgColor: 'blue.500',
//       color: 'white'
//     },
//     danger: {
//       bgColor: 'red.500',
//       color: 'white'
//     }
//   }
// });

// LaGouButton.defaultProps = {
//   size: 'sm',
//   variant: 'primary'
// };

// const LaGouButton = chakra('button', {
//   themeKey: 'LaGouButton'
// });

// console.log(LaGouButton);

function LaGouButton(props) {
  const { size, variant, ...rest } = props
  const styles = useStyleConfig("LaGouButton", { size, variant })
  return <Box as="button" sx={styles} {...rest} />
}


function App() {
  const { colorMode, toggleColorMode } = useColorMode();
  const bgColor = useColorModeValue('tomato', 'skyblue');
  return (
    <div>
      <Box w={200} h={200} bg={bgColor} p={30}>
        <Text>当前的颜色模式是{colorMode}</Text>
        <LightMode>
          <Button onClick={toggleColorMode}>切换颜色模式</Button>
        </LightMode>
      </Box>
      <Text color="gray.500">主题对象-颜色</Text>
      <Box w="lg" h="3xs" mb="5" bg="skyblue">主题对象-间距&大小</Box>
      <Box w={["100px", "200px", "300px", "600px"]} bg="tomato">主题对象-断点</Box>
      <LaGouButton size="xs" variant="primary">我是按钮</LaGouButton>
    </div>
  );
}

export default App;
